<%@page import="javax.sql.DataSource"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>歌曲搜索</title>
<link type="text/css" rel="stylesheet"
	href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"></link>
<link rel='stylesheet' type='text/css' href='css/songlistbody.css'>
<link type="text/css" rel="stylesheet"
	href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css"></link>
<link rel="stylesheet" type="text/css"
	href="css/songsearch.css">
<script type="text/javascript" src="js/jquery-1.9.js"></script>
<script type="text/javascript" src="js/songsearch.js"></script>
<script type="text/javascript">
	  
    function  checkbutton(){

   	 var name = document.getElementById("search_position").value;
   	 var check= document.getElementById("album");
      	 $.ajax({
               dataType: "text",
                  type: "post",
                  url: "check2.do",
                  data: "search="+name,
                  success: function(msg){
         	      if(msg.trim() == "true"){
         	    	  getNameAndSinger();
                       return false;
                   }else{
                	   album.innerHTML="<p>对不起,搜索不到该歌曲</p>";
                       return true;
                   }
                  }
       });
   }        
    
    
    function getNameAndSinger(){
    	var btn=new Array();

    	var songlist=document.getElementsByClassName("song"); 
    	var album=document.getElementById("album");
    	album.innerHTML="";
    	var searchname=document.getElementById("search_position"); 
    	for(var i=1;i<=songlist.length/2;i++){
    		btn[i]=document.getElementById("btn"+i.toString());
    	}
    	for(var i=1;i<=songlist.length/2;i++){
			
    		var songname=btn[i].getElementsByClassName("songname1");
    		var songsinger=btn[i].getElementsByClassName("songsinger1");
    		var name=songname[0].innerText;
    		var singer=songsinger[0].innerText;
            if(name.indexOf(searchname.value)!=-1){  
    			$('#album').append("<p><a>"+name+"--"+singer+"</a></p>");
    		}
    		
    	}
	}
</script>

</head>
<body>
	<div id="div1">
		<div id="head">
		   <img src="images/yinyue.jpg" alt="">
		</div>
		<div id="navigation">
			<ul class="nav nav-tabs nav-justified">
				<li role="presentation" id="li1" onmouseover="getsongList()"
					class="active"><a href="#">排行榜</a></li>
				<li role="presentation" id="li2" onmouseover="getsongList2()"><a
					href="#">歌手</a></li>
				<li role="presentation" id="li3" onmouseover="getsongList3()"><a
					href="#">专辑</a></li>
				<li role="presentation" id="li4" onmouseover="getsongList4()"><a
					href="#">其他搜索</a></li>
			</ul>

		</div>
		<div id="body">
			<div id="singerbody">
				<div class="songsinger">
					<img src="images/singer1.jpg" alt="">
					<p>
						1st<br /> 薛之谦
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer2.jpg" alt="">
					<p>
						2nd<br /> 陈奕迅
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer3.jpg" alt="">
					<p>
						3rd<br /> 周杰伦
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer4.jpg" alt="">
					<p>
						4th<br /> 冷漠
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer6.jpg" alt="">
					<p>
						5th<br /> 林俊杰
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer5.jpg" alt="">
					<p>
						6th<br /> 张学友
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer7.jpg" alt="">
					<p>
						7th<br /> 张杰
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer8.jpg" alt="">
					<p>
						8th<br /> 许嵩
					</p>
				</div>
				<div class="songsinger">
					<img src="images/singer9.jpg" alt="">
					<p>
						9th<br /> 郑源
					</p>
				</div>
				<div class="songsinger2">

					<p>10--李荣浩</p>
					<span id="up" class="glyphicon glyphicon-arrow-up"></span>
					<p>11--刘德华</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
					<p>12--杨宗纬</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
				</div>
				<div class="songsinger2">

					<p>13--孙子涵</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>14--汪苏泷</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
					<p>15--张信哲</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
				</div>
				<div class="songsinger2">
					<p>16--李克勤</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
					<p>17--徐良</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>18--谭咏麟</p>
					<span id="up" class="glyphicon glyphicon-arrow-up"></span>
				</div>
				<div class="songsinger2">
					<p>19--鹿晗</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>20--汪峰</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
					<p>21--刀郎</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
				</div>
				<div class="songsinger2">
					<p>22--高安</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>23--威仔</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>24--小沈阳</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
				</div>
				<div class="songsinger2">
					<p>25--周传雄</p>
					<span id="down" class="glyphicon glyphicon-arrow-down"></span>
					<p>26--张宇</p>
					<span id="up" class="glyphicon glyphicon-arrow-up"></span>
					<p>27--许巍</p>
					<span id="nom" class="glyphicon glyphicon-minus"></span>
				</div>

			</div>
			<div class="row" id="search">
				<div class="col-lg-6">
					<div class="input-group">
						<input type="text" class="form-control"
							placeholder="Search for..." id="search_position" class="search">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button"
								id="search_position2" onclick="checkbutton()">
								<img src="images/search.jpg" alt="" id="check">
							</button>
						</span>
					</div>
				
				</div>
					<div id="album"></div>
			</div>
			<div id="albumbody">
				<div class="album">
					<img src="images/album1.jpg" alt="">
					<p>周杰伦的床边故事</p>
					<p>唱片公司：杰威尔音乐</p>
					<p>发行时间：2016-08-03</p>
				</div>
				<div class="album">
					<img src="images/album2.jpg" alt="">
					<p>雨后星空</p>
					<p>唱片公司：丰华唱片</p>
					<p>发行时间：2016-08-02</p>
				</div>
				<div class="album">
					<img src="images/album4.jpg" alt="">
					<p>亲爱的翻译官 电视剧原声带</p>
					<p>唱片公司：谭旋音乐工作室</p>
					<p>发行时间：2016-07-07</p>
				</div>
				<div class="album">
					<img src="images/album6.jpg" alt="">
					<p>一路向南</p>
					<p>唱片公司：湖南弗彗影像文化传媒有限公司</p>
					<p>发行时间：2016-06-30</p>
				</div>
				<div class="album">
					<img src="images/albm7.jpg" alt="">
					<p>非童小可</p>
					<p>唱片公司：极韵文化</p>
					<p>发行时间：2016-06-30</p>
				</div>
				<div class="album">
					<img src="images/album8.jpg" alt="">
					<p>我想</p>
					<p>唱片公司：福茂唱片</p>
					<p>发行时间：2016-06-30</p>
				</div>
				<div class="album">
					<img src="images/album9.jpg" alt="">
					<p>Gussanova Ⅱ</p>
					<p>唱片公司：中国唱片总公司</p>
					<p>发行时间：2016-06-30</p>
				</div>
				<div class="album">
					<img src="images/album10.jpg" alt="">
					<p>做最好的我</p>
					<p>唱片公司：致力音乐</p>
					<p>发行时间：2016-06-30</p>
				</div>
				<div class="album">
					<img src="images/album11.jpg" alt="">
					<p>爱伤了你痛了我</p>
					<p>唱片公司：新月演艺</p>
					<p>发行时间：2016-06-12</p>
				</div>
				<div class="album">
					<img src="images/album12.jpg" alt="">
					<p>破影而出</p>
					<p>唱片公司：</p>
					<p>发行时间：2016-06-12</p>
				</div>
			</div>
			<div id="pankbody">
				<div id="songList">
					<c:forEach items="${songs}" var="s" varStatus="status">
						<div class="song">
							<div class="song" id="btn${status.index + 1}">
                                   <input type="checkbox" value="zz" />
                                   <span class="songsinger1">${s.songsinger}</span>  
                                   <span class="songname1">${s.songname}</span>
                                <a href="javascript:void(0)" >
                                    <div class="songIcon">
                                           <button class="glyphicon glyphicon-star-empty"  onclick="show('light')" value="btn${status.index + 1}"> </button>
                                    </div>
                           </a>                              
                                <a href="">
                                    <div class="songIcon">
                                      <span  class="glyphicon glyphicon-headphones"></span>
                                    </div>
                                </a>                         
                            </div>
						</div>
					</c:forEach>


				</div>
			</div>
		</div>
		<div id="bottom">
			<p></p>
			<p>[1]</p>
		</div>
		 <div id="light" class="white_content">
                      <div class="close">
                           <a href="javascript:void(0)" onclick="hide('light')">x</a>
                      </div>

                      <div id="insertsong"></div>
                     
        </div>       
	</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>